<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>d3 darg demo</title>
<style>
body{
margin:0;
padding:0;
overflow:hidden;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var nodes = [{x:100,y:100},{x:200,y:100},{x:300,y:100}];
	
var svg = d3.select("body")
	.append("svg")
	.attr("width",width)
	.attr("height",height);
	
var node = svg.append("g")
			.selectAll("circle")
			.data(nodes)
			.enter()
			.append("circle")
			.attr("r",30)
			.attr("cx",(item)=>item.x)
			.attr("cy",(item)=>item.y)
			.call(
				d3.drag()
				.on("start",dragStart)
				.on("end",dragEnd)
				.on("drag",draged)
			);
			
function dragStart(d){
	d.fx = d.x;
    d.fy = d.y;
}
function dragEnd(d){
	d.x = d.fx;
	d.y = d.fy;
	d.fx = null;
    d.fy = null;
}
function draged(d){
	const {x,y} = d3.event;
	d3.select(this)
        .attr('cx', x)
        .attr('cy', y);
	d.fx = d3.event.x;
    d.fy = d3.event.y;
}	
</script>
</body>
</html>